<ion-view class="bg-f7 near-com-wrapper near-maintain">
    <ion-header-bar align-title="center" class="com-header bg-f7 border-1px-ccc">
        <div class="buttons">
            <button ng-click="back()" class="button fs-0"><i class="icon ion-ios-arrow-back color-333 fs-18"></i>
            </button>
        </div>
        <h1 class="title color-333">附近保养服务</h1>
        <div class="buttons">
            <button ng-click="toggleSearch()" class="com-h-search fs-0"><i
                    class="icon ion-ios-search-strong color-base fs-16"></i></button>
        </div>
    </ion-header-bar>
    <div id="banner" class="banner">
        <img src="./asset/car_customer/images/data/banner.jpg" class="img">
    </div>
    <div class="weui-flex bg-white border-1px-f5 com-filter">
        <div ng-click="showAreaModal()" class="weui-flex__item filter-item">
            <span>重庆市</span>
            <i class="icon fs-18" ng-class="{true:'ion-ios-arrow-up', false:'ion-ios-arrow-down'}[areaModal]"></i>
        </div>
        <div class="line"></div>
        <div ng-click="showTypeModal()" class="weui-flex__item filter-item">
            <span>距离优先</span>
            <i class="icon fs-18" ng-class="{true:'ion-ios-arrow-up', false:'ion-ios-arrow-down'}[typeModal]"></i>
        </div>
    </div>
    <ion-content overflow-scroll="false" scrollbar-y="false" has-bouncing="false" ng-style="contTop">
        <div class="com-list">
            <div ui-sref="shop.detail({id: item.id})" ng-repeat="item in shopList" class="weui-flex com-list-item border-1px-f5">
                <div class="img-cont">
                    <img src="./asset/car_customer/images/data/shop.jpg" class="img">
                    <div class="mask fs-10 text-center color-white">商家休息中</div>
                </div>
                <div class="weui-flex__item item-cont">
                    <div class="my-title fs-0">
                        <h2 class="title color-333 fs-14 inline-block txt-line-1">重庆靓车会专业汽车重庆靓车会专业汽车</h2>
                        <div class="label label-order fs-10 inline-block color-white">预</div>
                        <div class="label label-buy fs-10 inline-block color-white">购</div>
                    </div>
                    <div class="star">
                        <span><i class="icon ion-ios-star"></i></span>
                        <span><i class="icon ion-ios-star"></i></span>
                        <span><i class="icon ion-ios-star"></i></span>
                        <span><i class="icon ion-ios-star-half"></i></span>
                    </div>
                    <div class="detail fs-10 color-999 txt-line-1"></div>
                    <div class="adress fs-10 color-ccc ver-top txt-line-1"><i class="icon ion-ios-location ver-top"></i>
                        1.5km 重庆市渝北区龙山三路16号春风城重庆市渝北区龙山三路16号春风城
                    </div>
                </div>
            </div>
            <!--无限加载-->
            <div ng-show="true" class="weui-loadmore weui-loadmore_line">
                <span class="weui-loadmore__tips bg-f7">已经到底了</span>
            </div>
            <!--无限加载使用这个样方式进行 开关  ng-if="hasMore" -->
            <!--如果不需要则删除即可-->
            <ion-infinite-scroll
                    ng-if="hasMore"
                    on-infinite="onLoadMore()"
                    spinner="ios"
                    distance="1%">
            </ion-infinite-scroll>
        </div>
    </ion-content>
    <!--地区选择-->
    <div ng-show="areaModal" ng-click="closeModal()" class="my-filter-modal" ng-style="contTop">
        <ion-content class="filter-cont" overflow-scroll="false" scrollbar-y="false" has-bouncing="false">
            <ul class="pad-side-15 bg-white area-list">
                <li ng-repeat="item in areList track by $index" class="my-item border-1px-f5">{{item.name}}</li>
            </ul>
        </ion-content>
    </div>
    <!--类型选择-->
    <div ng-show="typeModal" ng-click="closeModal()" class="my-filter-modal" ng-style="contTop">
        <ion-content class="filter-cont" overflow-scroll="false" scrollbar-y="false" has-bouncing="false">
            <ul class="pad-side-15 bg-white area-list">
                <li ng-repeat="item in typeList track by $index" class="my-item border-1px-f5">{{item.name}}</li>
            </ul>
        </ion-content>
    </div>
</ion-view>